<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: auto;

        line-height: 500px;
        text-align: center;
        
    }

    /* .box h2 {
        line-height: 500px
    } */


    .innerBox {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border: solid 4px black;
        cursor: pointer;
    }
</style>

<body>
    <div class="box">
        <h2>好消息，全场一折，不要错过，时不再来</h1>
            <div class="innerBox">X</div>
    </div>

    <script>
        const innerBox = document.querySelector('.box .innerBox')
        let boxClass = document.querySelector('.box')
        innerBox.addEventListener('click', function () {
            boxClass.style.display = 'none'
        })
    </script>
</body>

</html>